Pixelated (bitmap) images are fantastic at conveying photorealism, but they are not always the best choice for displaying detailed and consistent graphical information:
We cannot scale bitmap images without losing
precision:
Bitmap images are made up of a fixed number of
pixels, so they only look their best at a specific size and resolution
and become pixelated/blurry when resized (they can be made smaller, but
not bigger).
Bitmaps are often large and resource-hungry:
Every pixel in a bitmap image is associated with a separate piece of
memory in the computer. This means that detailed images can be very
large, difficult to edit and share, and their quality is dependent on
the software and hardware used to view them.
Vectors are scalable with no loss of quality
Instead of containing a fixed number of square pixels, vector graphics
store information about objects as points on a plane, connected by
mathematical equations that describe their shape and relationships to
one another.
Files are much smaller
Vector graphics can
be more easily edited, shared and stored than bitmap images.
The image always looks the same, on screen or printed, regardless of the size or resolution All this makes them a great choice for precise/detailed plots, schematics, infographics, graphical abstracts and posters.
It requires a little bit of practice to get to grips with vector graphics software, but you don’t need to be an artist or designer to make use of these tools. There are some considerations to keep in mind when using vector graphics though:
Most commonly you’ll see .svg (Scalable Vector Graphics). (Svg’s are XML based which makes them easy to render in most web browsers for quick viewing!)
PDFs can also be vector-based (but not always). Think about how when you zoom into a pdf file the text always remains crisp and clear!
Another common file type is .eps (Encapsulated PostScript). .EPS
in my experience is a favourite of journals because it’s so easily
editable and compatible with most design software.
Tip! If you’re working in Illustrator, files will be .ai natively, and if you’re working in Inkscape it will be .svg. I recommend you always keep a copy of your file in the native format of the software it was created in, and save any exports as a new version, just incase something goes wrong down the line. It’s easy to export a .ai file into a .eps, but not necessarily the other way around…
You can easily save plots from R as vectors that can then be edited in a vector graphics software. In RStudio for example, you can use ggsave or svg()
It’s important to bear in mind though, that the more heavily manually edited a plot is, the less reproducible it is. Before editing a plot it’s worth asking yourself whether a coding solution might be a better option first!
The two main types of colour models are RGB (Red, Green, Blue) (used primarily for digital display) and CMYK (Cyan, Magenta, Yellow, Black) (used primarily for print). It’s important to consider the colours of your work before you start. Just remember that a graphic produced with RGB colours will look different when printed and visa versa.
Which to choose for both print and screen? There isn’t an
obvious answer but I usually create the image in RGB first because of
the wider choice of colours available for digital displays. Just
remember that before printing, you might want to convert the image to
CMYK to ensure accurate colour reproduction.
Note! While Illustrator has a built in engine for converting between colour models, in Inkscape it’s a bit more tricky, and you might have to use a different software - I think Scribus is the most commonly used free option.
There are countless options! I’ve dabbled in a few but the two most popular are probably Inkscape and Illustrator. They both have their pros and cons and I’ve listed a few below:
| Inkscape | Illustrator |
|---|---|
| Very accessible (free and open source) with community driven updates | Requires an expensive licences subscription with Adobe (UoS staff and students can request one) |
| .svg native format. May struggle with some complex file types | .ai native format, more flexible at handling complex file types. Seamless workflow with other Adobe software |
| RGB native colour model, external software needed for colour model conversion | RGB or CMYK colour models easily specified with a built in colour model conversion engine |
| Can have stability issues, but has fewer system requirements | Pretty stable, however can require a huge amount of RAM for big files and won’t run well on old/certain systems |
| Lacks some tools and features, however realistically it has everything you need for simple graphics and posters | Has a lot of specialised tools and functions. The industry standard |
| Many community resources out there for learning, with a shallower learning curve than Illlustrator | Steeper learning curve, so not as suitable for beginners, fewer community resources |
This is not an exhaustive tutorial (that would take days!), but just a list of the most important tools and features I think you’ll need to get started.
Page format
Page orientation
Guides (create guides around page is handy)
Metadata
Licence (if needed)
Resize to content (useful to remember this feature but don’t worry about it for now)
Zoom in and out either with the zoom tool (bottom right), or ctrl + scroll
There are also some useful quick zoom tools in the commands bar on the right (e.g. zoom to page, zoom to selection, zoom centre view etc)
Drag the page around the page by pressing the scroll wheel, holding the spacebar, or ctrl/shift + right click
Rotate the page with the rotate tool (bottom right under the palette)
Toolbox: Tool selection
Working page area: You can use the canvas outside but it won’t be rendered in the final export
Docking area: Dialogs for specific tool functions
Commands bar: Quick access to common commands
Snap controls: Useful for aligning objects but can be irritating. I recommend turning snapping off to start with
Palette: Basic usage for changing object fill (shift + click for stroke/outline). Change palette on the right
Tool control bar: More adjustable options for the selected tool
Future you will thank you for taking the time to organise objects into layers!
You can shift to select multiple objects, then group them (right click + group) to move and adjust objects together, and gather them under the same layer controls.
There are currently around 23 primary tools in Inkscape, but you’re not likely to use all of them (for now). Only a few are really necessary to get started. I’ll show you the tools I’ve found most useful.
Selector tool: The primary tool you’ll use to navigate your workspace, move, rotate, scale and select objects.
Node tool: You’ll use this to edit the shape of objects. I’ll talk more about nodes below.
Shape tools: Quickly create rectangles/circles/stars/polygons. Use the tool control bar for more options
Pen tool: You’ll use this to draw precise lines and shapes by hand. It takes a little work to get the hang of, but once you do you’ll find it the most versatile and useful tool at your disposal.
Text tool: You can guess what this does. You can change the font, size, colour, alignment and more in the text dialog in the docking area. You can move it around like any other object.
Gradient tool: This one you might not use as much, but it’s a nice way to add some depth to your work.
Dropper tool: You’ve probably used this in Paint, they provide quick and easy ways to change and match the colour of objects.
Connector tool: This is a slightly obscure tool, but it’s useful for drawing lines in flow charts and diagrams.
Tip! Each node on a path needs to be calculated and rendered by the software. The more nodes your shape has, the more complex it becomes and the heavier the load on your system. Past a certain point this can create significant lag (particularly in Inkscape), so it’s best to keep your shapes as simple as possible. The simplify tool can automatically reduce the number of nodes in an overly complex object. Try this using ctrl + L on a selected object and see how it responds. You can also manually remove excess nodes. Learning how to use the pen tool properly is a great way to minimise excessive node use (more on this later).
The compositor for the journal will convert your image to journal specifications accordingly, but it’s best to send them the best quality images you can.
Generally, 600DPI (DPI = dots per inch) is the standard for print, and 300DPI is the standard for web.
There is sometimes a width and height limit for your work as well.
You should check journal requirements first.
If you need any help or advice with Inkscape or Illustrator I’m happy to help, if I can! :). There are also a ton of helpful resources online, and I’ve found the Inkscape community in particular are great for providing advice and tutorials.
Tip! If you like the settings you applied to one object and want to apply it to other objects, just select the object and copy it with ctrl + C it, then select the object you want to apply the settings to and use ctrl + shift + V. This will apply the colour, stroke, font and any filters or other attributes to the new object.
As I mentioned earlier, it’s worth remembering that the more heavily manually edited a plot is, the less reproducible it is.
Having said that, it’s definitely sometimes useful to be able to manipulate figures using a vector graphics software, particularly for presentations or for making superficial edits that are difficult to achieve in code.
I’ve provided some examples below of some quick and easy annotations with some fake data/figures so you can see what’s possible.
If you need to change the working page to fit the image, you can use ‘resize page to content’ in document properties
If the figure is too large/small, resize it but don’t forget ctrl to keep the aspect ratio.
Alternatively you can crop the image: Create a rectangle (or other shape) the size that you would like to crop to. Use shift to highlight both the rectangle and the image, then right-click and select Set Clip.
Tip! Everything is an individual editable vector in an svg file! So be careful not to move points or branches etc. It’s a good idea to create a separate layer to hold data points/branches etc. These can be locked in place with the padlock icon if needed.
In this case, the species names in the violin plot are in the reverse order. We can fix this easily by mirroring the plot.
Go to the tool control bar and use the flip vertical tool to mirror the plot, then rotate it using the rotate tool. Easy peasy!
You can use ctrl with the pen tool to create perfectly straight lines (e.g. for brackets or arrow annotations). You can use the X/Y coordinates to perfectly match node positions.
Increasing the thickness of lines (using the stroke tab in the docking area) is an easy way to highlight them (e.g. the mean bar or certain branches in the tree).
In this example, I also removed the upper and lower quantiles by making them invisible in the layers tab (that way I can turn them back on if I change my mind).
You can create additional vectors, or import any external vector or image you like (just remember to check copyright!)
Text is easy to edit and move around, and you can use the shape tool to create boxes or elipses to highlight areas on your figure (just change the opacity of the object if you want to see what’s underneath).
You get the idea! This was a silly nonsense example but even if you just use Inkscape to change the positioning of combined plots or text/annotations, it can save you a ton of time when doing final edits for a manuscript :)
Feel free to practice with these dummy plots if you like.
# load ape
library(ape)
library(ggplot2)
# Set seed
set.seed(123)
# Create a random tree with 10 tips
tree <- chronos(rtree(n = 10, rooted = TRUE)) # Generate a rooted ultrametric tree
plot(tree)
# Save tree as an svg file (edit the filepath)
svg("filepath/FakeTree.svg", width = 7, height = 5) # open graphics device
plot(tree)
dev.off() # close the graphics device
# Create some fake data and plot it
set.seed(456)
fake_data <- data.frame(
Species = factor(rep(tree$tip.label, each = 100), levels = tree$tip.label), # Reorder species
Value = c(rnorm(100, mean = 5), rnorm(100, mean = 6), rnorm(100, mean = 7),
rnorm(100, mean = 8), rnorm(100, mean = 5), rnorm(100, mean = 7),
rnorm(100, mean = 4), rnorm(100, mean = 6), rnorm(100, mean = 7),
rnorm(100, mean = 6))
)
violin_plot <- ggplot(fake_data, aes(x = Species, y = Value, fill = Species)) +
geom_violin(trim = FALSE, draw_quantiles = c(0.25, 0.5, 0.75)) +
geom_jitter(width = 0.1, alpha = 0.5) +
theme_minimal() +
theme(legend.position = "none", axis.text.x = element_text(angle = 45, hjust = 1)) +
ylab("Value") +
xlab("Species")
# Save violin plot as an SVG file (edit the filepath)
svg("filepath/fake_violin_plot.svg", width = 7, height = 5)
violin_plot
dev.off()